<template>
  <div class="game-item" @click="jump">
    <div class="h-[38px] w-[38px]">
      <img class="w-full h-full object-cover" :src="lotteryLogo(info.LotteryId)" />
    </div>
    <div class="flex flex-1 w-0 items-center pl-[10px] justify-between">
      <div class="flex flex-col">
        <div class="text-[15px]">{{ info.Name }}</div>
        <div class="text-[#888] text-[13px]">{{ info.Issue }}期</div>
      </div>
      <div class="flex flex-col justify-center items-end w-[70px] text-[13px]">
        <template v-if="!state.locked && !state.opened">
          <div class="text-[#111]">距离封盘</div>
        </template>
        <template v-if="state.locked && !state.opened">
          <div class="text-red">封盘中</div>
        </template>
        <template v-if="state.opened">
          <div class="text-blue">开奖中</div>
        </template>
        <div class="text-[#999] text-[12px]">
          <open-time
            v-show="!state.locked && !state.opened"
            :total-second="lockSecond"
            :simple="true"
            @finish="lockTimeFinish"
          />
          <open-time
            v-show="false"
            :simple="true"
            :total-second="openSecond"
            @finish="openTimeFinish"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { lotteryLogo } from "@/utils/game";
import { diffTime } from "@/utils/common";
import { GameCategory } from "@/enums";
import { toast } from "@/utils/toast";

const props = defineProps({
  info: {
    type: Object as PropType<GameTotalMo>,
    default: () => {}
  }
});
const router = useRouter();
const roomState = inject<RoomState>("roomState") as RoomState;
const state = reactive({
  locked: false,
  opened: false
});
const lockSecond = computed(() => {
  try {
    let timer = !props.info.CloseTime ? 0 : diffTime(props.info.CloseTime);
    if (timer <= 0) {
      return 0;
    } else {
      return timer;
    }
  } catch (error) {
    return 0;
  }
});
const openSecond = computed(() => {
  try {
    let timer = !props.info.NextTime ? 0 : diffTime(props.info.NextTime);
    if (timer <= 0) {
      return 0;
    } else {
      return timer;
    }
  } catch (error) {
    return 0;
  }
});
const lockTimeFinish = () => {
  state.locked = true;
};
const openTimeFinish = () => {
  state.opened = true;
};

const jump = () => {
  if (props.info.CategoryId == GameCategory.lhc) {
    toast.info("六合彩彩票无聊天记录");
  } else {
    router.replace(`/admin/main/room/${props.info.LotteryId}`);
    roomState.switchGameOpen = false;
  }
};

watch(
  () => props.info,
  (val, old) => {
    if (val.Issue != old.Issue) {
      state.locked = false;
      state.opened = false;
    }
  }
);
</script>
<style lang="css" scoped>
.game-return {
  @apply h-[35px] flex justify-center items-center;
  @apply border-b-[1px] border-solid border-[#eee];
}
.game-item {
  @apply flex py-[11px] ml-[10px] pr-[15px] items-center;
  @apply border-b-[1px] border-solid border-[#eee];
}
</style>
